<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <div slot="header" class="clearfix">
          <span>试题录入/编辑</span>
        </div>
        <el-form label-width="120px">
          <el-form-item label="学科：">
            <el-select
              style="width: 400px"
              v-model="questionsForm.subjectID"
              @change="getdirectorysList(questionsForm.subjectID)"
            >
              <el-option
                v-for="item in subjectsList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="目录：">
            <el-select style="width: 400px" v-model="questionsForm.catalogID">
              <el-option
                v-for="item in directorysList"
                :key="item.id"
                :value="item.id"
                :label="item.directoryName"
              >
                {{ item.directoryName }}
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="企业：">
            <el-select
              style="width: 400px"
              v-model="questionsForm.enterpriseID"
            >
              <el-option
                v-for="item in companysList"
                :key="item.id"
                :label="item.company"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="城市：">
            <el-row type="flex" justify="space-between" style="width: 400px">
              <el-select
                style="width: 198px"
                v-model="questionsForm.province"
                @change="questionsForm.city = ''"
              >
                <el-option
                  v-for="(item, index) in provinces()"
                  :key="index"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
              <el-select style="width: 198px" v-model="questionsForm.city">
                <el-option
                  v-for="(item, index) in citys(this.questionsForm.province)"
                  :key="index"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-row>
          </el-form-item>

          <el-form-item label="方向：">
            <el-select style="width: 400px" v-model="questionsForm.direction">
              <el-option
                v-for="(item, index) in direction"
                :key="index"
                :label="item"
                :value="index"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="题型：">
            <el-radio-group v-model="questionsForm.questionType">
              <el-radio
                v-for="item in questionType"
                :key="item.value"
                :label="item.value.toString()"
              >
                {{ item.label }}
              </el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="难度：">
            <el-radio-group v-model="questionsForm.difficulty">
              <el-radio
                v-for="item in difficulty"
                :key="item.value"
                :label="item.value.toString()"
              >
                {{ item.label }}
              </el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="题干：">
            <!-- <vue-quill-editor
              v-model="questionsForm.answerID"
            ></vue-quill-editor> -->
          </el-form-item>
          <div el-if="true">
            <el-form-item label="单选选项：">
              <el-row>
                <el-col
                  v-for="(item,index) in questionsForm.options"
                  :key="item.index"
                >
                <!-- <el-col
                  v-for="(item, index) in questionsForm.options"
                  :key="item.id"
                > -->
                  <el-radio-group v-model="isR">
                    <el-radio @change="inputChangeFn" :label="item.id">
                      {{ item.code }}：<el-input v-model="questionsForm.options[index].title" :value="item.title"></el-input>
                      <!-- <el-upload
                      class="avatar-uploader"
                      action="https://jsonplaceholder.typicode.com/posts/"
                      :show-file-list="false"
                      :on-success="handleAvatarSuccess"
                      :before-upload="beforeAvatarUpload"
                    >
                      <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                      <i
                        v-else
                        class="el-icon-plus avatar-uploader-icon"
                      ></i> </el-upload
                  > -->
                    </el-radio>
                  </el-radio-group>
                </el-col>
              </el-row>
            </el-form-item>
            <!-- <el-form-item label="多选选项：">
              <el-checkbox-group>
                <el-checkbox label="" name="">
                  A：<el-input></el-input>
                </el-checkbox>
                <el-checkbox label="" name="">
                  B：<el-input></el-input>
                </el-checkbox>
                <el-checkbox label="" name="">
                  C：<el-input></el-input>
                </el-checkbox>
                <el-checkbox label="" name="">
                  D：<el-input></el-input>
                </el-checkbox>
              </el-checkbox-group>
            </el-form-item> -->
          </div>

          <el-form-item label="解析视频：">
            <el-input
              v-model="questionsForm.videoURL"
              style="width: 400px"
            ></el-input>
          </el-form-item>
          <el-form-item label="答案解析：">
            <!-- <vue-quill-editor
              v-model="questionsForm.question"
            ></vue-quill-editor> -->
          </el-form-item>
          <el-form-item label="题目备注：">
            <el-input
              v-model="questionsForm.remarks"
              type="textarea"
              style="width: 400px"
            ></el-input>
          </el-form-item>
          <el-form-item label="试题标签：">
            <el-select
              v-model="questionsForm.tags"
              multiple
              filterable
              allow-create
              default-first-option
              placeholder="请选择文章标签"
            >
              <el-option
                v-for="item in tagslist"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitClick"> 确认提交 </el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script>
import { detail } from '../../api/hmmm/questions'
import { questionType, difficulty, direction } from '../../api/hmmm/constants'

// 城市
import { provinces, citys } from '../../api/hmmm/citys'

// 学科
import { simple as subjectsSimple } from '../../api/hmmm/subjects'

// 目录
import { list as directorysList } from '../../api/hmmm/directorys'

// 企业
import { list as companysList } from '../../api/hmmm/companys'

// 富文本
// import vueQuillEditor from '../components/vue-quill-editor.vue'

// 标签
import { simple as tagsList } from '../../api/hmmm/tags'

// difficulty难度 questionType题型 direction方向
export default {
  // components: { vueQuillEditor },
  created () {
    this.test()
    this.getsubjectsList() // 获取学科列表
    // this.getdirectorysList(this.questionsForm.subjectID) // 获取目录列表
    this.getcompanysList() // 获取企业列表
    this.gettagsList() // 获取标签列表
    this.isR = this.questionsForm.options.filter(item => item.isRight === 1)[0].id
    console.log(this.isR)
  },
  mounted () {
    this.getdirectorysList(this.questionsForm.subjectID) // 获取目录列表
  },
  data () {
    return {
      provinces,
      citys,
      isR: 1,
      direction,
      difficulty,
      questionType,
      questionsForm: {
        id: '', // 编号
        number: '', // 试题编号
        subjectID: '', // 学科
        subjectName: '', // 学科名称
        catalogID: '', // 目录
        enterpriseID: '', // 企业
        province: '', // 省份
        city: '', // 城市
        direction: '', // 方向
        questionType: '', // 题型
        difficulty: '', // 难度
        question: '', // 题干
        options: [
          // 最小数量: 3
          // 元素是否都不同: true
          // 最大数量: 5
          // item 类型: object
          {
            id: '', // 编号
            code: '', // 代码
            title: '', // 标题
            img: '', // 图片
            isRight: 0 // 是否是正确答案 buer
          },
          {
            id: '', // 编号
            code: '', // 代码
            title: '', // 标题
            img: '', // 图片
            isRight: 0 // 是否是正确答案 buer
          },
          {
            id: '', // 编号
            code: '', // 代码
            title: '', // 标题
            img: '', // 图片
            isRight: 0 // 是否是正确答案 buer
          },
          {
            id: '', // 编号
            code: '', // 代码
            title: '', // 标题
            img: '', // 图片
            isRight: 0 // 是否是正确答案 buer
          }
        ],
        videoURL: '', // 解析视频
        answerID: '', // 答案解析
        remarks: '', // 题目备注
        tags: null // 试题标签
      },
      subjectsList: [], // 学科下拉数据
      directorysList: [], // 目录下拉数据
      companysList: [], // 公司下拉数据
      tagslist: [], // 标签下拉数据
      testObj: {
        id: 75
      }
    }
  },
  methods: {
    async test () {
      // 获取一个测试用的数据
      const res = await detail(this.testObj)
      this.questionsForm = res.data
      // console.log('res.data', res.data, this.questionsForm.question)
      console.log('this.questionsForm.options', this.questionsForm.options)
      // console.log('this.questionsForm.tags', this.questionsForm.tags)
    },

    // 获取学科列表
    async getsubjectsList () {
      const res = await subjectsSimple()
      this.subjectsList = res.data
      // console.log('学科列表', this.subjectsList)
      // console.log('学科ID', this.questionsForm.subjectID)
    },

    // 获取目录列表 questionsForm.subjectID 学科ID
    async getdirectorysList (id) {
      console.log('this.questionsForm.subjectID', this.questionsForm.subjectID)
      this.questionsForm.catalogID = ''
      const {
        data: { items }
      } = await directorysList({ subjectID: id })
      // console.log(items)
      this.directorysList = items
    },

    // 获取企业列表
    async getcompanysList () {
      const res = await companysList()
      // console.log('company', res)
      this.companysList = res.data.items
      // console.log(this.companysList)
    },

    // 获取标签列表
    async gettagsList () {
      const { data } = await tagsList(this.questionsForm.subjectName)
      this.tagslist = data
      // console.log('tagslist', this.tagslist)
      // 必须以，分割成数组
      if (this.tagslist) {
        this.questionsForm.tags = this.questionsForm.tags.split(',')
        // console.log(this.questionsForm.tags)
        // ['123', '345', '456', __ob__: Observer]
      }
    },
    inputChangeFn () {
      // this.questionsForm.options.forEach(item => item.isRight = 0)
      for (let i = 0; i < this.questionsForm.options.length; i++) {
        this.questionsForm.options[i].isRight = 0
      }
      console.log(this.questionsForm.options)
    },
    submitClick () {
      console.log(1)
      this.questionsForm.options.filter(item => item.id === this.isR)[0].isRight = 1
      console.log(this.questionsForm.options)
    }
  },
  computed: {
    isRightN () {
      console.log(this.questionsForm.options.filter(item => item.isRight === 1)[0].id)
      return this.questionsForm.options.filter(item => item.isRight === 1)[0].id
    }
  }
}
</script>

<style scoped>
.editor {
  height: 239px;
}
</style>
